@import './variables.scss';

.post-likes {
	font-size: $font-body-small;

	.post-likes__item {
		display: inline-block;
		vertical-align: top;
		text-decoration: none;
		padding: $post-like-padding;

		.gravatar {
			display: block;
		}
	}

	&.has-display-names {
		max-height: 340px;
		overflow-y: auto;

		.post-likes__item {
			display: block;
			position: relative;
			padding: 4px 8px;
			border-bottom: 1px solid var( --color-neutral-0 );

			&:last-child {
				border-bottom-width: 0;
			}

			.gravatar {
				position: absolute;
			}
		}

		.post-likes__display-name {
			display: block;
			line-height: 24px;
			padding-left: 32px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.post-likes__count:not( .is-loading ) {
			margin: 12px 16px 12px 32px;
		}
	}

	.post-likes__count {
		vertical-align: top;
		margin: 6px 8px 4px 4px;
		line-height: 14px;
		border-radius: 12px;
		display: inline-block;
		border: solid 1px var( --color-neutral-light );
		color: var( --color-text-subtle );
		padding: 1px 6px;
		font-weight: 600;
		font-size: $font-body-extra-small;

		&.is-loading {
			border-color: transparent;
			@include placeholder();
			margin: 5px;
		}
	}
}
